<%--
  Created by IntelliJ IDEA.
  User: Dell
  Date: 2018/8/6
  Time: 12:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="PageFrame.jsp"%>

<title>数据查找-实验数据</title>

<!--Page Content-->
<div class="container background_form" id="search_experiment">
    <div class="content">
        <div class="form-group jumbotron" id="search_panel">
            <div class="row" id="row1">
                <h1><label>搜索实验数据</label></h1>
            </div>
            <div class="row" id="row2">
                <div class="col-md-3 col-sm-3 col-xs-3" id="c1">
                    <span>
                        <select class="form-control" id="experiment_search_base">
                            <option>作者</option>
                            <option>日期</option>
                            <option>DOI号</option>
                        </select>
                    </span>
                </div>
                <div class="col-md-9 col-sm-9 col-xs-9">
                    <span id="c2">
                        <input type="search" class="form-control" id="experiment_search_keyword" placeholder="请输入要查找关键词" autocomplete="off">
                    </span>
                    <span id="c3">
                        <input type="submit" id="experiment_search" onclick="search_experiment_data()" value="搜索" class="form-control">
                    </span>
                    <div id="c4" hidden>
                        <span>共</span><span id="search_experiment_data_num" style="background-color: #F1C40F">0</span><span>条数据</span>
                    </div>
                </div>
            </div>
        </div>
        <div id="experiment_show_panel" hidden>
            <table class="table table-bordered">
                <thead style="background-color: #f3f3f3;">
                <tr>
                    <th style="width:25%">ID</th>
                    <th style="width:25%">作者</th>
                    <th style="width:25%">日期</th>
                    <th style="width:25%">DOI号</th>
                </tr>
                </thead>
            </table>
            <div class="experiment_data_tbody ">
                <table id="show_experiment_data" class="table table-bordered table-hover">
                    <thead>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div>
                <div id="experiment_search_result_Total_select" style="float: left">
                    <span class="fa-stack fa-lg">
                        <i class="fa fa-square-o fa-stack-1x"></i>
                    </span>
                    <span style="margin-left: -10px;">全选</span>
                </div>
                <form action="./generate_experiment_select_result" target="_blank">
                    <div style="margin-top: 5px">
                        <input type="hidden" id="experiment_select_result" name="experiment_select_result">
                        <button class="btn btn-primary btn-sm" type="submit" onclick="generate_experiment_select_result()">生 成</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--/Page Content-->

<!--js-->
<%--search experiment data--%>
<script type="text/javascript">
    function search_experiment_data() {
        var base = document.getElementById("experiment_search_base").value;
        var keyword = document.getElementById("experiment_search_keyword").value;
        if(keyword !== ""){
            $.ajax({
                url: "keyword_search_experiment",
                type: "POST",
                data: { base: base, keyword: keyword},
                success: function (returndata) {
                    if (returndata.replace(/[\r\n]/g, "") !== "") {
                        create_show_panel();
                        //清空表格内容
                        var table = document.getElementById("show_experiment_data");
                        var tbody = table.children[1];
                        var childrenNum = tbody.children.length;
                        for (var i = 0; i < childrenNum; i++) {
                            tbody.removeChild(tbody.children[0]);
                        }
                        //写入数据
                        var search_result = returndata.split("wlcniubi");
                        document.getElementById("search_experiment_data_num").innerHTML=search_result.length;
                        for (var i = 0; i < search_result.length; i++) {
                            var row_arr = search_result[i].split("lxyniubi")
                            create_row_panel(row_arr, i);
                        }
                    }
                    else {
                        alert("Data Not Found")
                    }
                },
                error:function (returndata) {
                    alert("search failed!");
                }
            });
        }
        else {
            alert("keyword is empty!");
        }
    }

    function create_show_panel() {
        $("#experiment_show_panel").removeAttr("hidden");
        $("#search_experiment_data_num").removeAttr("hidden");
        $("#row1").attr("hidden", "hidden");
        $("#search_panel").addClass("search-mini");
    }
    //按行创建表格
    function create_row_panel(arr_content, row_num) {
        var table = document.getElementById("show_experiment_data");
        var tbody = table.children[1];
        var tr = document.createElement("tr");
        for(var i = 0; i < arr_content.length; i++) {
            var td = document.createElement("td");
            var span = document.createElement("span");
            span.appendChild(document.createTextNode(arr_content[i]));
            td.appendChild(span);
            td.style.width = "25.2%";
            td.id = "search_result-"+row_num+"-"+i;
            tr.appendChild(td);
        }
        tbody.id = "search_result-" + row_num;
        tbody.appendChild(tr);
    }
</script>

<%--click_event_listener--%>
<script type="text/javascript">
    document.onclick = function (e) {
        var evt=e||window.event;               //保证兼容性
        var tar=evt.target||evt.srcElement;  //获取触发事件的元素

        if (tar.tagName.toLowerCase() === "td"){
            var tbody = document.getElementById("show_experiment_data").children[1];
            var tbodyName = tar.id.split("-")[0];
            var tbodyRow = tar.id.split("-")[1];
            var tbodyCol = tar.id.split("-")[2];
            if (tbodyName === "search_result"){
                tbody.children[tbodyRow].style.backgroundColor = tbody.children[tbodyRow].style.backgroundColor === "rgb(209, 209, 209)"? "#FFFFFF":"#D1D1D1";
            }
        }
        else if(tar.tagName.toLowerCase() === "i"){
            var span = document.getElementById("experiment_search_result_Total_select").children[0];
            if (span.children.length === 1){
                span.innerHTML += '<i class="fa fa-check fa-stack-1x" style="color: #13780D"></i>';
                var tbody = document.getElementById("show_experiment_data").children[1];
                for (var i = 0;i < tbody.children.length;i++){
                    tbody.children[i].style.backgroundColor = "#D1D1D1";
                }
            }else{
                span.children[1].remove();
                var tbody = document.getElementById("show_experiment_data").children[1];
                for (var i = 0;i < tbody.children.length;i++){
                    tbody.children[i].style.backgroundColor = "#FFFFFF";
                }
            }
        }
    };
</script>

<%--generate_Experiment_search_result--%>
<script type="text/javascript">
    function generate_experiment_select_result() {
       var select_result = new Array();

       var tbody = document.getElementById("show_experiment_data").children[1];
       for(var i = 0; i < tbody.children.length; i++) {
           if(tbody.children[i].style.backgroundColor === "rgb(209, 209, 209)") {
               select_result.push(tbody.children[i].children[0].children[0].innerHTML);
           }
       }
       document.getElementById("experiment_select_result").value = select_result.join("wlcniubi");
    }
</script>
